<template>
	<!-- 下拉选择 -->
	<view class="pickerBox" :style="{color:color}">
		<picker @change="p" :range="pArray" :range-key="'name'" >
			<view style="display: flex;align-items: center;flex:1" >
				<label style="white-space: nowrap;" >{{ pArray[pIndex]?pArray[pIndex].name:title }}</label>
				<image class="homenavSelectImg" src="@/static/img/bottom.png"></image>
			</view>
		  
		</picker>
	</view>
</template>

<script>
	export default {
		props:{
			title:String,
			value:String,
			color:{
				type:String,
				default:'#fff'
			}
		},
		components: {
		},
		data() {
			return {
				imgUrl:this.$apiFun.imgUrl,
				host:this.$apiFun.host,
				pArray:[],
				pIndex:null,
			}
		},
		watch:{
			value(val){
				this.setDate(val)
			}
		},
		onLoad() {
		},
		methods: {
			setDate(val){
				const param = {
					array:this.pArray,
					id:val
				}
				this.changeShow(param)
			},
			changeShow(e){
				this.pArray = e.array
				console.log('this.pArray',this.pArray)
				let num = null
				e.array.filter((item,index)=>{
					if(item.id== e.id){
						num = index
					}
				})
				this.pIndex = num
			},
			p(e){
				this.pIndex = e.detail.value
				this.$emit('p',this.pArray[this.pIndex])
			}
		},
		onReachBottom() {
			
		}
	}
</script>

<style scoped lang="less">
	page{
		width: 100%;
		height: 100%;
		.pickerBox{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;
			.homenavSelectImg{
				width:35rpx;
				height:30rpx;
				margin-left:10rpx;
			}
		}
	}
</style>
